<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="68px">
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="daterangeReceiveTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="orderList">
      <el-table-column prop="orderType" label="工单类型"></el-table-column>
      <el-table-column prop="orderType1" label="电脑维修"></el-table-column>
      <el-table-column prop="orderType2" label="打印机维修"></el-table-column>
      <el-table-column prop="orderType3" label="系统重装"></el-table-column>
      <el-table-column prop="orderType4" label="软件升级"></el-table-column>
      <el-table-column prop="orderType5" label="网络优化"></el-table-column>
      <el-table-column prop="other" label="其他"></el-table-column>
      <el-table-column prop="orderTotal" label="合计"></el-table-column>
    </el-table>
    <div id="chart" style="height:500px;width:100%" />
  </div>
</template>

<script>
import {
  orderType
} from "@/api/business/order";
import echarts from "echarts";

export default {
  name: "Order",
  data() {
    return {
      // 单据状态时间范围
      daterangeReceiveTime: [],
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 工单管理表格数据
      orderList: [],
      // 查询参数
      queryParams: {
        receiveTime: null
      },
      chartData: []
    };
  },
  created() {
    this.initDateScope();
    this.getList();
    this.initChart()
  },
  methods: {
    /** 初始化日期范围 */
    initDateScope() {
      let end = new Date();
      let year = end.getFullYear();
      let month = end.getMonth() + 1;//0-11表示1-12月
      let day = end.getDate();
      let dateObj = {};
      dateObj.end = year + '-' + month + '-' + day;
      let endMonthDay = new Date(year, month, 0).getDate();    //当前月的总天数
      if(month - 1 <= 0){ //如果是1月，年数往前推一年<br>　　　　
        dateObj.start = (year - 1) + '-' + 12 + '-' + day;
      }else{
        let startMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate();
        if(startMonthDay < day){    //1个月前所在月的总天数小于现在的天日期
          if(day < endMonthDay){        //当前天日期小于当前月总天数
            dateObj.start = year + '-' + (month - 1) + '-' + (startMonthDay - (endMonthDay - day));
          }else{
            dateObj.start = year + '-' + (month - 1) + '-' + startMonthDay;
          }
        }else{
          dateObj.start = year + '-' + (month - 1) + '-' + day;
        }
      }
      this.daterangeReceiveTime.push(dateObj.start)
      this.daterangeReceiveTime.push(dateObj.end)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
      this.initChart()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeReceiveTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询工单管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeReceiveTime && '' != this.daterangeReceiveTime) {
        this.queryParams.params["startTime"] = this.daterangeReceiveTime[0];
        this.queryParams.params["endTime"] = this.daterangeReceiveTime[1];
      }
      orderType(this.queryParams).then(response => {
        this.orderList = response.rows;
        var data1 = {'value': this.orderList[0].orderType1, 'name': '电脑维修'}
        var data2 = {'value': this.orderList[0].orderType2, 'name': '打印机维修'}
        var data3 = {'value': this.orderList[0].orderType3, 'name': '系统重装'}
        var data4 = {'value': this.orderList[0].orderType4, 'name': '软件升级'}
        var data5 = {'value': this.orderList[0].orderType5, 'name': '网络优化'}
        var data6 = {'value': this.orderList[0].other, 'name': '其他'}
        this.chartData[0] = data1
        this.chartData[1] = data2
        this.chartData[2] = data3
        this.chartData[3] = data4
        this.chartData[4] = data5
        this.chartData[5] = data6
        this.initChart()
        this.loading = false;
      });
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.setOptions(this.chartData)
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: '工单类型统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
;
</script>
